<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<u-search placeholder="书法家、艺术家、作品" v-model="keyword" shape="round" :clearabled="true" border-color="#cf3837"></u-search>
		</view>
		
		<!-- 筛选模块 -->
    <view>
    <u-dropdown ref="uDropdown" @open="open" @close="close">
    			<u-dropdown-item v-model="value1" title="状态" :options="options1" @change="change"></u-dropdown-item>
    			<u-dropdown-item v-model="value2" title="价格" :options="options2"></u-dropdown-item>
					<u-dropdown-item title="分类">
						<view class="slot-content">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">其他自定义内容</view>
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
    		</u-dropdown>
	  </view>
	
	<!-- 列表模块 -->
	<view>
		<view class="list">
			<view class="detail" @click="goToGoodsDetail">
				<image src="../../../static/person.png" mode=""></image>
				<view class="name">
					<text>金玉满堂连年有余四条屏</text>
				</view>
				<view class="size">
					<text>刘换天 120*120</text>
				</view>
				<view class="price">
					<text>¥3000</text>
				</view>
			</view>
			
		<view class="detail" @click="goToGoodsDetail">
			<image src="../../../static/person.png" mode=""></image>
			<view class="name">
				<text>金玉满堂连年有余四条屏</text>
			</view>
			<view class="size">
				<text>刘换天 120*120</text>
			</view>
			<view class="price">
				<text>¥3000</text>
			</view>
		</view>
		</view>
	</view>
	<view>
		<view class="list">
			<view class="detail" @click="goToGoodsDetail">
				<image src="../../../static/person.png" mode=""></image>
				<view class="name">
					<text>金玉满堂连年有余四条屏</text>
				</view>
				<view class="size">
					<text>刘换天 120*120</text>
				</view>
				<view class="price">
					<text>¥3000</text>
				</view>
			</view>
			
		<view class="detail" @click="goToGoodsDetail">
			<image src="../../../static/person.png" mode=""></image>
			<view class="name">
				<text>金玉满堂连年有余四条屏</text>
			</view>
			<view class="size">
				<text>刘换天 120*120</text>
			</view>
			<view class="price">
				<text>¥3000</text>
			</view>
		</view>
		</view>
	</view>
	<diy-bottom-nav></diy-bottom-nav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '书法家、艺术家、作品',
				value1: 1,
				value2: 2,
				options1: [
					{
						label: '全部',
						value: 1,
					},
					{
						label: '已售',
						value: 2,
					},
					{
						label: '未售',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
		methods: {
			goToGoodsDetail(){
				uni.navigateTo({
					url:'../goodsDetail/goodsDetail'
				})
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change() {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
			}
		}
	}
</script>

<style lang="scss" scoped>
.search {
	width: 90%;
	margin: 5%;
}

.list{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	width: 90%;
}

.list .detail {
	background-color: #fefffe;
	border-radius: 10rpx;
	width: 346rpx;
	margin-left: 3%;
}

.list image{
	width:346rpx;
	height: 346rpx;
	border-radius: 10rpx 10rpx 0 0;
}
.list text {
	margin-left: 20rpx;
}

.list .name {
	font-weight: 700;
	font-size: 28rpx;
}

.list .size {
	font-weight: normal;
	font-size: 24rpx;
	color: #939393;
}

.list .price {
	font-size: 36rpx;
	color: #c61210;
	font-weight: 700;
}
</style>
